<template>
	<div id="TranslateForm">
		<h5 class="text-primary">果然的第三个vue项目 简单 / 易用 / 方便</h5>
		<div class="card text-white bg-secondary ">
  <div class="card-body">
    <form @submit="formSubmit"  class="form-inline" >
		<div  class="input-group mx-auto">
			<input  class="form-control"  type="text" v-model="textToTranslate" placeholder="输入要翻译的内容">
			<div class="input-group-append">
				<select v-model="language"  class="custom-select" >
					<option value="en">English</option>
					<option value="ru">Russian</option>
					<option value="ko">Korean</option>
					<option value="ja">Janpenese</option>
				</select>
			</div>
			
			<div  class="input-group-append">
				<input class="btn btn-primary" type="submit" value="翻译">
			</div>
			
		</div>
    	
    </form>
  </div>
</div>
		
	</div>
</template>

<script>
export default {
	name: 'TranslateForm',
	data:function(){
		return {
			textToTranslate:"",
			language:""
		}
	},
	methods:{
		formSubmit: function(undefaultEvent){
			//alert(this.textToTranslate);
			//事件注册
			this.$emit("passingEvents",this.textToTranslate,
			  this.language);
			undefaultEvent.preventDefault();
		}
	},
	created:function(){
		this.language="en";
	}
}
</script>

<style>
</style>
